<template>
    <div class="goodsbuy">
        <div class="mui-card wrap">
            <div class="mui-card-header">
                <h4>
                    {{goodsinfo.title}}
                </h4>
            </div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        <span>市场价：<del>{{goodsinfo.market_price | priceFormat}}</del></span>
                        <span>销售价：<span class="now">{{goodsinfo.sell_price  | priceFormat}}</span></span>
                    </p>
                    <span class="buycount">购买数量： </span>
                    <div class="mui-numbox">
                        <button class="mui-btn mui-btn-numbox-minus" type="button" @click="count--">-</button>
                        <input class="mui-input-numbox" type="number" v-model="count"/>
                        <button class="mui-btn mui-btn-numbox-plus" type="button" @click="count++">+</button>
                    </div>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button size="small" type="primary">立即购买</mt-button>
                <mt-button size="small" type="danger" @click="goToShopcart">加购物车</mt-button>

            </div>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    export default {
        name: "goodsbuy",
        props:['goodsinfo'],
        data(){
            return {
                count:1
            }
        },
        methods:{
            goToShopcart(){//这是点击加购物车按钮的事件，功能：告诉父组件，我的按钮被点击了
                this.$emit('buttondown',this.count)
            }
        },
        watch:{//侦听器用来检测属性值的变化，默认有两个参数，参数一：最新的值，参数二：是原来的值
            count(newvalue,oldvalue){
                if (newvalue <= 1) {
                    Toast('您最少选够一件商品')
                    this.count = 1
                }
                if (newvalue>=this.goodsinfo.stock_quantity) {
                    Toast('您选够数量太多了，超出我们的库存了')
                    this.count = this.goodsinfo.stock_quantity
                }

            }
        }

    }
</script>

<style scoped lang="scss">
.wrap{
    .mui-card-header{
        h4{
            font-size: 16px;
            font-weight: 400;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }
    .mui-card-content{
        .price{
            display: flex;
            justify-content: space-around;
            .now{
                color: red;
                font-size: 18px;
            }
        }
        .buycount{
            margin-left: 30px;
        }
        .mui-numbox{

            width: 80px;
            height: 28px;
            padding: 0px 25px 0 25px;
        }
        .mui-numbox [class*=btn-numbox]{
            width: 25px;
        }
    }
    .mui-card-footer{
        display: flex;
        justify-content: space-around;
    }

}
</style>
